<!--
 * @Author: C.
 * @Date: 2021-09-03 10:47:43
 * @LastEditTime: 2021-09-06 17:20:28
 * @Description: file content
-->

<template>
  <div class="table-obj">
    <div style="margin-bottom: 5px">
      <Checkbox v-model:checked="cdata.show" />
      <span class="table-obj-title">{{ cdata.title.label }}</span>
      <Icon icon="ant-design:delete-outlined" :size="18" @click="delTableObj" />
    </div>
    <a-button type="dashed" class="btn" shape="round" @click="addFieldShow(true)"
      >添加列表</a-button
    >
    <a-button type="dashed" class="btn" shape="round" @click="delTableItem">删除列表</a-button>
    <a-button type="dashed" class="btn" shape="round" @click="cdata.title.show = !cdata.title.show"
      >隐藏标题</a-button
    >
    <a-button type="dashed" class="btn" shape="round" @click="cdata.showSum = !cdata.showSum">{{
      cdata.showSum ? '关闭合计' : '开启合计'
    }}</a-button>
    <a-button type="dashed" class="btn" shape="round" @click="changeFieldShow(true)"
      >修改绑定</a-button
    >
    <div>
      <Row :class="cdata.id">
        <Col :span="12" v-for="field in cdata.fields" :key="field.id">
          <Checkbox v-model:checked="field[0].show">{{ field[0].label }}</Checkbox>
        </Col>
      </Row>
    </div>
    <Divider style="border-color: #971515" dashed />
  </div>
  <AddField
    @register="addFieldRegister"
    @success="addField"
    title="添加列表"
    :formSchema="TableFieldItem"
  />
  <AddField
    @register="changeFieldRegister"
    @success="changeField"
    title="修改绑定"
    :formSchema="TableField"
  />
</template>
<script lang="ts">
  import { defineComponent, onMounted, ref } from 'vue';
  import { Checkbox, Row, Col, Divider } from 'ant-design-vue';
  import { usePrintStore } from '/@/store/modules/print';
  import { FieldConstructor } from '../../../../../../../utils';
  // import AddField from './cpn/AddField.vue';
  import { useModal } from '/@/components/Modal';
  import Icon from '/@/components/Icon/index';
  import AddField from '../../Block/cpn/AddField.vue';
  import { TableFieldItem, TableField } from '../../../form.config';
  // import { useSortable } from '/@/hooks/web/useSortable';
  import Sortable from 'sortablejs';

  export default defineComponent({
    components: { Icon, Checkbox, Row, Col, Divider, AddField },
    props: {
      cdata: {
        type: Object,
        default: () => {},
      },
      name: {
        type: String,
        default: 'table',
      },
    },
    setup(props) {
      let printStore = usePrintStore();
      let block = printStore.printTemplate[props.name];

      const [addFieldRegister, { openModal: addFieldShow }] = useModal();
      const [changeFieldRegister, { openModal: changeFieldShow }] = useModal();

      function changeField(e) {
        // eslint-disable-next-line vue/no-mutating-props
        props.cdata.prop = e.prop;
      }
      function addField(field) {
        // block.nodes.push(FieldConstructor(field));
        let colLabel = FieldConstructor(Object.assign(field, { role: 'label' }));
        let colValue = FieldConstructor(Object.assign(field, { role: 'value' }));
        // eslint-disable-next-line vue/no-mutating-props
        props.cdata.fields.push([colLabel, colValue]);
      }
      function delTableItem() {
        props.cdata.fields.forEach((node, index) => {
          if (node[0].id == printStore.currentNode.id) {
            // eslint-disable-next-line vue/no-mutating-props
            props.cdata.fields.splice(index, 1);
          }
        });
      }
      function delTableObj() {
        block.forEach((item, index) => {
          if (item.id == props.cdata.id) {
            block.splice(index, 1);
          }
        });
      }
      // 行拖拽
      function rowDrop() {
        let className = '.' + props.cdata.id;
        console.log(className);
        // 此时找到的元素是要拖拽元素的父容器
        // console.log(document.querySelector(className),888888888888);
        const fields = document.querySelector(className);

        Sortable.create(fields as HTMLElement, {
          //  指定父元素下可被拖拽的子元素
          draggable: '.ant-col',
          onEnd({ newIndex, oldIndex }) {
            const currRow = props.cdata.fields.splice(oldIndex, 1)[0];
            props.cdata.fields.splice(newIndex, 0, currRow);
            console.log(props.cdata.fields, 55555555);
          },
        });
      }
      onMounted(() => {
        rowDrop();
      });
      return {
        block,
        delTableItem,
        addFieldShow,
        addField,
        addFieldRegister,
        checked: ref(true),
        TableFieldItem,
        TableField,
        changeFieldRegister,
        changeFieldShow,
        changeField,
        delTableObj,
      };
    },
  });
</script>
<style lang="less" scoped>
  .btn {
    margin-right: 10px;
    margin-bottom: 10px;
  }

  .table-obj {
    .table-obj-title {
      font-size: 17px;
      padding: 0 5px;
    }
  }
</style>
